<template>
    <div class="box-row container-panel">
        <div class="tree-panel tree-no-line">
            <div class="title">门禁组</div>
            <uxTree
                ref="tree"
                node-key="group_sn"
                highlight-current
                :data="treeData"
                :default-expand-all="true"
                :indent="0"
                :props="treeParams"
                :expand-on-click-node="false"
                @node-click="onNodeClick"
            ></uxTree>
        </div>
        <div class="panel-el">
            <div class="header-search-el box-row box-center-end">
                <el-button
                    @click="onAddClick"
                    v-if="permissionsData.add"
                    class="btn-blue"
                    icon="el-icon-plus"
                >
                    新增
                </el-button>
            </div>
            <div class="box-flex1 table">
                <vxe-grid
                    v-bind="tableConfig"
                    :data="dataStore.data"
                    :columns="table.columns"
                >
                    <template v-slot:operate="{ row }">
                        <ux-btn-group
                            :btns="table.btns"
                            :data="{ row, permissionsData }"
                        ></ux-btn-group>
                    </template>
                </vxe-grid>
            </div>
            <div class="pagination-el box-row box-center-end">
                <el-pagination
                    @size-change="onSizeChange"
                    @current-change="onCurrentChange"
                    :current-page="dataStore.proxy.page"
                    :page-size="dataStore.proxy.pageSize"
                    :page-sizes="dataStore.pageSizes"
                    :total="dataStore.pagination.total"
                    :layout="'total, sizes, prev, pager, next, jumper'"
                ></el-pagination>
            </div>
        </div>
        <dialogForm
            ref="dialogForm"
            :selectItem="selectItem"
            @submitSuccess="onSubmitSuccess"
            @closeDialog="onCloseDialog"
        ></dialogForm>
        <dialogOperation
            ref="dialogOperation"
            @submitSuccess="onSubmitSuccess"
            @closeDialog="onCloseDialog"
        ></dialogOperation>
    </div>
</template>

<script  lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { Action, Getter, State } from 'vuex-class';
import { mixinTableStore } from '@/mixin/table/Store';
import { mixinTableTree } from '@/mixin/table/Tree';
import { mixinTableOperation } from '@/mixin/table/Operation';
import { mixinDialogFormParent } from '@/mixin/dialog/FormParent';
import { mixinAccess } from '@/mixin/Access';
import dialogForm from './Edit.vue';
import dialogOperation from './Operation.vue';
import uxTree from '@/components/tree';
@Component({
    mixins: [
        mixinTableStore,
        mixinTableTree,
        mixinTableOperation,
        mixinDialogFormParent,
        mixinAccess
    ],
    components: {
        dialogForm,
        uxTree,
        dialogOperation
    }
})
export default class equipmentDoorHome extends Vue {
    @Action('equipmentDoor/del') itemDel: any;
    @Action('equipmentDoor/list') getList: any;
    // 获取楼栋
    @Action('equipmentDoorGroup/all') getTree: any;
    @Getter('equipmentDoorGroup/all') treeData: any;
    pickList: any = ['group_sn'];
    treeValueName: string = 'group_sn';
    @State((state) => state.sharing.doorDirect) doorDirectData: any;
    table: any = {
        btns: [
            {
                label: '编辑',
                condition: ['permissionsData.edit'],
                handleClick: (this as any).onEditClick
            },
            {
                label: '删除',
                condition: ['permissionsData.del'],
                handleClick: (this as any).onDelClick
            },
            {
                label: '开门记录',
                condition: ['permissionsData.log'],
                handleClick: this.onInfoClick
            },
            {
                label: '远程操作',
                condition: [
                    'permissionsData.remote',
                    function ({ row }) {
                        return row.online_status == 1;
                    }
                ],
                param: 'dialogOperation',
                handleClick: (this as any).onEditClick
            }
        ],
        // 列配置
        columns: [
            {
                width: 70,
                type: 'seq',
                title: '序号'
            },
            {
                title: '门禁名称',
                field: 'door_name'
            },
            {
                title: '门禁编号',
                field: 'door_guid'
            },
            {
                title: '版本号',
                field: 'door_version',
                width: 80
            },
            {
                title: '在线状态',
                field: 'online_status',
                width: 80,
                params: 'onLineStatusData',
                formatter: (this as any).formatterData,
                className: function ({ row }) {
                    return ['', 'green ', 'red'][row.online_status];
                }
            },
            {
                width: 150,
                title: '上线/下线时间',
                field: 'online_time'
            },
            {
                title: '安装方向',
                field: 'door_direct',
                params: 'doorDirectData',
                formatter: (this as any).formatterData
            },
            {
                title: '创建时间',
                field: 'created_at'
            },
            {
                slots: { default: 'operate' },
                title: '操作',
                width: 310
            }
        ]
    };

    onInfoClick({ row }) {
        (this as any).go(
            'equipmentDoorLogTable',
            {
                id: row.door_guid,
                isEdit: true,
                data: row
            },
            { isBase: true }
        );
    }
    treeParams: any = {
        label: 'group_name'
    };
}
</script>
